<template>
  <a-collapse :active-key="activeKey" @change="change">
    <a-collapse-panel
      v-for="(item, index) in list"
      :key="item.title"
      :header="item.title"
      class="FormItemBody"
    >
      <draggable
        v-model="item.items"
        item-key="title"
        :group="{ name: 'TpFormGroup', pull: 'clone', put: false }"
        :clone="clone"
        :sort="false"
        animation="300"
      >
        <template #item="{ element }">
          <r-h-button
            v-bind="initDefaultParam(element)"
            :key="'base-form-item-btn-' + index"
          />
        </template>
      </draggable>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import draggable from 'vuedraggable'
import _ from 'lodash'
import RHButton from '@/components/RHButton'
export default {
  name: 'RHDesignerItem',
  components: { RHButton, draggable },
  props: {
    list: {
      type: Array,
      default: (_) => []
    }
  },
  data() {
    return {
      activeKey: []
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.initDesignerItem()
    })
  },
  methods: {
    clone(obj) {
      const newObj = Object.assign(_.cloneDeep(obj), {
        dataIndex: `${obj.type}_${new Date().getTime()}`
      })
      return newObj
    },
    change(key) {
      console.log(key)
      this.activeKey = key
    },
    initDefaultParam(param) {
      const cloneParam = _.cloneDeep(param)
      cloneParam.type = null
      return _.defaultsDeep(cloneParam, {
        block: true,
        className: 'FormItemBtn',
        icon: { name: 'edit-outlined' },
        type: 'dashed'
      })
    },
    initDesignerItem() {
      this.activeKey = []
      this.list.forEach((x) => {
        this.activeKey.push(x.title)
      })
    }
  }
}
</script>
<style scoped>
.FormItemBody {
  text-align: left;
}
.FormItemBtn {
  margin: 5px;
  width: 100px;
}
</style>
